<template>
  <div class="setting">
    <div class="setting-section">
      <div class="setting-section-title">存档</div>
      <div class="setting-section-btn-list">
        <Button :size="buttonSize" @click="inputSave">导入存档</Button>
        <Button :size="buttonSize" @click="outputSave">导出存档</Button>
      </div>
    </div>
    <div class="setting-section">
      <div class="setting-section-title">重置</div>
      <div class="setting-section-btn-list">
        <Button :size="buttonSize" @click="resetGame">重置游戏</Button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Setting',

  data() {
    return {
      buttonSize: 'large',
      value: '',
      inputSaveData: '',
      outputSaveData: '',
    }
  },

  methods: {
    inputSave() {
      this.$Modal.confirm({
        width: '800',
        okText: '导入',
        onOk: () => {
          this.$game.inputSave(this.inputSaveData).then(() => {
            this.$Message.info('导入存档成功')
          }).catch(() => {
            this.$Message.info('导入存档失败')
          })
        },
        render: (h) => {
          return h('div', {
            'class': ['setting-modal']
          }, [
            h('p', {
                'class': ['setting-modal-text']
              },
              '请在下面粘贴存档代码并导入',
            ),
            h('Input', {
              props: {
                type: 'textarea',
                rows: 14
              },
              on: {
                input: (val) => {
                  this.inputSaveData = val
                }
              }
            })
          ])
        }
      })
    },
    outputSave() {
      this.$game.outputSave().then((response) => {
        this.outputSaveData = response
        this.$Modal.info({
          width: '800',
          okText: '关闭',
          render: (h) => {
            return h('div', {
              'class': ['setting-modal']
            }, [
              h('p', {
                  'class': ['setting-modal-text']
                },
                '请手动复制下面的存档代码',
              ),
              h('Input', {
                props: {
                  value: this.outputSaveData,
                  type: 'textarea',
                  rows: 14
                }
              })
            ])
          }
        })
      })
    },
    resetGame() {
      this.$Modal.confirm({
        title: '是否确认重置游戏？',
        content: '你的全部游戏进度将会被删除',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.$game.reset().then(() => {
            this.$Message.info('游戏已重置')
          })
        },
      });
    }
  },
}
</script>

<style lang="scss">

</style>
